<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#box1 {
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			left: 0;
		}
	</style>

	<script type="text/javascript">

		window.onload = function () {

			//获取box1
			var box1 = document.getElementById("box1");
			//获取btn01
			var btn01 = document.getElementById("btn01");

			//获取btn02
			var btn02 = document.getElementById("btn02");


			//点击按钮以后，使box1向右移动（left值增大）
			btn01.onclick = function () {
				move(box1, 800, 10);
			};


			//点击按钮以后，使box1向左移动（left值减小）
			btn02.onclick = function () {
				move(box1, 0, 10);
			};

		};

		//定义一个变量，用来保存定时器的标识
		var timer;

		//尝试创建一个可以执行简单动画的函数
		/*
		 * 参数：
		 * 	obj:要执行动画的对象
		 * 	target:执行动画的目标位置
		 * 	speed:移动的速度(正数向右移动，负数向左移动)
		 */
		function move(obj, target, speed) {
			//关闭上一个定时器
			clearInterval(timer);

			//获取元素目前的位置
			var current = parseInt(getStyle(obj, "left"));

			//判断速度的正负值
			//如果从0 向 800移动，则speed为正
			//如果从800向0移动，则speed为负
			if (current > target) {
				//此时速度应为负值
				speed = -speed;
			}

			//开启一个定时器，用来执行动画效果
			timer = setInterval(function () {

				//获取box1的原来的left值
				var oldValue = parseInt(getStyle(obj, "left"));

				//在旧值的基础上增加
				var newValue = oldValue + speed;

				//判断newValue是否大于800
				//从800 向 0移动
				//向左移动时，需要判断newValue是否小于target
				//向右移动时，需要判断newValue是否大于target
				if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
					newValue = target;
				}

				//将新值设置给box1
				obj.style.left = newValue + "px";

				//当元素移动到0px时，使其停止执行动画
				if (newValue == target) {
					//达到目标，关闭定时器
					clearInterval(timer);
				}


			}, 30);
		}


		/*
		 * 定义一个函数，用来获取指定元素的当前的样式
		 * 参数：
		 * 		obj 要获取样式的元素
		 * 		name 要获取的样式名
		 */
		function getStyle(obj, name) {

			if (window.getComputedStyle) {
				//正常浏览器的方式，具有getComputedStyle()方法
				return getComputedStyle(obj, null)[name];
			} else {
				//IE8的方式，没有getComputedStyle()方法
				return obj.currentStyle[name];
			}

		}


	</script>
</head>

<body>

	<button id="btn01">点击按钮以后box1向右移动</button>
	<button id="btn02">点击按钮以后box1向左移动</button>

	<br /><br />

	<div id="box1"></div>

	<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>

</body>

</html>